<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.text {
				width: 100px;
				background: pink;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				/* width: 100px;
				background: pink;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden; */
			}

			p {
				position: relative;
				line-height: 20px;
				max-height: 40px;
				overflow: hidden;
			}

			p::after {
				content: "...";
				position: absolute;
				bottom: 0;
				right: 0;
				padding-left: 40px;
				background: -webkit-linear-gradient(left, transparent, #fff 55%);
				background: -o-linear-gradient(right, transparent, #fff 55%);
				background: -moz-linear-gradient(right, transparent, #fff 55%);
				background: linear-gradient(to right, transparent, #fff 55%);
			}
		</style>
	</head>
	<body>
		<div class="text">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
		<p>我是文字2我是文字我是文字我是文字我是文字我是文字我是文字</p>
	</body>
</html>
